<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>好友管理</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/fonts/line-icons.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/main.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/responsive.css">
	<link rel="stylesheet" type="text/css" href="../assets/plugins/datatables/bootstrap-table.min.css" />
</head>
<body>
<div class="container-fluid">
	<div class="breadcrumb-wrapper row">
		<div class="col-12 col-lg-3 col-md-6">
			<h4 class="page-title">我的好友</h4>
		</div>
		<div class="col-12 col-lg-9 col-md-6">
			<ol class="breadcrumb float-right">
				<li class="active">好友管理</li>
				<li class="active"> / 我的好友</li>
			</ol>
		</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-body">
					<form class="form-inline">
						<div class="col-10">
							<div class="form-group row">
								<label>查找好友：</label>
								<input type="text" class="form-control mb-2 mr-sm-2" id="findNickname" placeholder="昵称"/>
								<input type="text" class="form-control mb-2 mr-sm-2" id="findUsername" placeholder="账号"/>
								<input type="text" class="form-control mb-2 mr-sm-2" id="findGroupName" placeholder="分组"/>
								<input type="button" class="btn btn-success" id="findGroup" value="查找">
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="container-fluid">
	<table id="table">

	</table>
</div>
<div class="modal fade" id="friendUpdateModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">修改分组</h5>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			</div>
			<div class="modal-body">
				<div class="form-group row">
					<input type="hidden" id="userFriendId" />
					<h5 class="col-sm-3">组别</h5>
					<div class="col-sm-7">
						<select class="form-control form-control-lg" id="groupSelect"></select>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
				<input type="button" class="btn btn-common" id="sureUpdate" value="确定"/>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="friendDeleteModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-body">
				<input type="hidden" id="friendP" />
				<p>是否确认删除该好友？</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
				<input type="button" class="btn btn-common" id="sureDelete" value="确定"/>
			</div>
		</div>
	</div>
</div>
<script src="../assets/js/jquery-min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/plugins/datatables/bootstrap-table.min.js"></script>
<script src="../assets/plugins/datatables/bootstrap-table-zh-CN.min.js"></script>
<script>
    //项目根路径
    var ctx = window.parent.ctx;
	var user = window.parent.user;
	var par = $("body");
	var pheight = $(window.parent.document).find(".main-content").height();
	var friendList = new Array();
    
	$(function(){
		$("#groupSelect").empty();
		$.ajax({
			type: "post",
			url: ctx+"/group/findGroupNameByUserId",
			xhrFields: {
				withCredentials: true
			},
			success: function(data) {
				for(var i=0;i<data.length;i++){
					$("#groupSelect").append("<option value='"+data[i].id+"'>"+data[i].groupName+"</option>");
				}
			}
		});
		
		$.ajax({
			type: "post",
			url: ctx+"/userFriend/getAllFriend",
			xhrFields: {
				withCredentials: true
			},
			success: function(data){
				friendList = data;
				$("#table").bootstrapTable('load',data);
				// 父页面自适应子页面高度
				par.height(pheight);
			},
			error: function(data){
				console.log("ajax请求失败");
			}
		});
		
		$("#findGroup").click(function(){
			var str = {"targetUser":{"nickname":$("#findNickname").val(),"username":$("#findUsername").val()},"group":{"groupName":$("#findGroupName").val()}};
			$.ajax({
				type: "post",
				url: ctx+"/userFriend/findByKeyword",
				xhrFields: {
					withCredentials: true
				},
				data: JSON.stringify(str),
				contentType: "application/json",
				success: function(data){
					friendList = data;
					$("#table").bootstrapTable('load',data);

					// 父页面自适应子页面高度
					par.height(pheight);
				}
			});
		});
		
		$("#sureUpdate").click(function(){
			$.ajax({
				url: ctx+"/userFriend/updateGroup",
				type: "POST",
				xhrFields: {
					withCredentials: true
				},
				data: {id:$("#userFriendId").val(),groupId: $("#groupSelect").val()},
				success: function (data) {
					alert(data);
					window.location.reload();
				},
				error: function(){
					alert("修改失败");
				}
			});
		});
		
		$("#sureDelete").click(function(){
			var i = parseInt($("#friendP").val());
			var friend = friendList[i];
			var str = {"id":friend.id,"targetUser":{"id":friend.targetUser.id}};
			$.ajax({
				type: "post",
				url: ctx+"/websocket/deleteById",
				xhrFields: {
					withCredentials: true
				},
				data: JSON.stringify(str),
				contentType: "application/json",
				success: function(data){
					alert(data);
					window.location.reload();
				},
				error: function(){
					alert("删除失败");
				}
			});
		});

		$("#table").bootstrapTable({
			classes: 'table table-hover',
			pagination: true,
			pageSize: 8,
			pageNumber: 1,
			smartDisplay: true,
			columns: [{
				field: '',
				title: '序号',
				formatter: function (value, row, index) {
					return index + 1;
				}
			},
				{
					field: 'targetUser.nickname',
					title: '昵称'
				},
				{
					field: 'targetUser.profilePhoto',
					title: '头像',
					formatter: function (value, row) {
						return "<img src=" + value + " alt='user-img' class='img-circle' style='border-radius:50%;width: 50px;height: 50px'/>"
					}
				},
				{
					field: 'targetUser.username',
					title: '账号'
				},
				{
					field: 'group.groupName',
					title: '学校'
				},
				{
					field: 'operate',
					title: '操作',
					events: {
						'click #updateGroup': function (e, value, row) {
							$("#userFriendId").val(row.id);
							$("#friendUpdateModal").modal('show');
						},
						'click #deleteGroup': function (e, value, row, index) {
							$("#friendP").val(index);
							$("#friendDeleteModal").modal('show');
						}
					},
					formatter: function (value, row, index) {
						var buttonStr = "<button id='updateGroup' type='button' class='btn btn-success'>修改分组</button> " +
								"<button id='deleteGroup' type='button' class='btn btn-danger'>删除</button>";
						return buttonStr;
					}
				}],
			onPostBody: function () {
				$(".page-list").remove();
			}
		});
	});
	
</script>
</body>
</html>